<script setup lang="ts">
import { ref } from "vue";
import vueDocx from "@/components/vueDocx.vue";
import vueExcel from "@/components/vueExcel.vue";
import vuePdf from "@/components/vuePdf.vue";
const isShow = ref(1);

const handleShow = (id) => {
  switch (id) {
    case 1:
      isShow.value = 1;
      break;
    case 2:
      isShow.value = 2;
      break;
    case 3:
      isShow.value = 3;
      break;

    default:
      break;
  }
};
</script>

<template>
  <div class="content">
    <div class="box">
      <div class="boxItem">
        <ul>
          <li :class="isShow == 1 ? 'redBorder' : ''" @click="handleShow(1)">
            word
          </li>
          <li :class="isShow == 2 ? 'redBorder' : ''" @click="handleShow(2)">
            excel
          </li>
          <li :class="isShow == 3 ? 'redBorder' : ''" @click="handleShow(3)">
            pdf
          </li>
        </ul>
      </div>
      <vueDocx v-if="isShow == 1" />
      <vueExcel v-if="isShow == 2" />
      <vuePdf v-if="isShow == 3" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.content {
  display: flex;
  justify-content: center;
  padding: 20px;

  @media screen and (max-width: 500px) {
    padding: 8px;
  }

  .box {
    width: 1280px;
    background-color: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0px 10px 10px 10px #ccc;
    margin-top: 15px;

    @media screen and (max-width: 500px) {
      padding: 8px;
      width: 100%;
    }
  }
}

li {
  margin: 10px;
}
</style>
